<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/Avatar.css" type="text/css">
<script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
<title>个人主页</title>
</head>

<body>

    <script type="module">
        import { main } from "./js/Timeline.js";
        main("avatar");

    </script>
    <script type="module">
        import{man}from "./js/Avatar.js";
        man();
    </script>
    <div class="fixed-top">
        <ul class="navbar">
            <li><a href="./index.html">首页</a></li>
            <li><a href="./Timeline.html">时间轴</a></li>
            <li><a href="./category.html">分类</a></li>
            <li><a href="./edit-article.html">发布文章</a></li>
            <li><a href="#">个人主页</a></li>
            <li><a href="./about.html">关于</a></li>
            <li><a href="./login.html">登录</a></li>
        </ul>
        <div class="search-bar">
            <input type="text" id="searchInput" placeholder="搜索文章..." style="margin-top: 1px;" onkeypress="handleKeyPress(event)">
            <input type="button" value="🔍" onclick="searchPosts()" style="margin-top: -1px;" id="searchBtn">
        </div> 
    </div>

<div class="content">
    <div class="icon-row">
        <img src="./img/QQ图片20231017115626.jpg" alt="头像" class="timeline-icon" id="profile-image">
        <table class="personal-info-table">
            <tr>
                <td>用户名：</td>
                <td id="display-username">想不出来</td>
            </tr>
            <tr>
                <td>加入时间：</td>
                <td id="display-join-date">2024-03-10</td>
            </tr>
            <tr>
                <td>个人简介：</td>
                <td id="display-bio">菜狗</td>
            </tr>
        </table>   
        <button class="edit-profile-btn">编辑资料</button>
    </div>
    <div class="timeline" id="timeline">
      <!-- 动态加载的文章将会显示在这里 -->
    </div>
</div>

<!-- 弹窗背景 -->
<div id="modal-background" class="modal-background">

  <!-- 弹窗内容 -->
<div class="modal-content">
    <h2>编辑个人信息</h2>
    <label for="modal-username">用户名:</label>
    <input type="text" id="modal-username" name="username"><br>
    <label for="modal-join-date">加入时间:</label>
    <input type="text" id="modal-join-date" name="join-date"><br>
    <label for="modal-bio">个人简介:</label>
    <input type="text" id="modal-bio" name="bio"><br>
    <label for="avatar">上传头像:</label>
    <input type="file" id="avatar-input" name="avatar" onchange="previewAvatar(event)"><br>
    <button id="save-button">确认</button>
    <button id="cancel-button">取消</button>
</div>

<script type="module">
    import { main } from "./js/Avatar.js";
    main();
</script>


</body>
</html>
